<template>
  <view style="display: flex; flex-direction: column; row-gap: 20rpx">
    <view v-for="(value, index) of valueList" :key="index">
      <view style="display: flex; flex-direction: column; column-gap: 10rpx">
        <view>
          <u-input
            :value="getText(value)"
            :readonly="true"
            @tap="showOnePicker(value, index)"
            :clearable="true"
          ></u-input>
          <u-picker
            :show="onePicker.show"
            :columns="onePicker.columns"
            key-name="label"
            :immediateChange="true"
            @confirm="(event) => onePickerConfirm(event)"
            @cancel="onePickerCancel"
            :closeOnClickOverlay="true"
            @close="pickerClose"
            title="一级分类"
          ></u-picker>
          <u-picker
            :show="twoPicker.show"
            :columns="twoPicker.columns"
            key-name="label"
            :immediateChange="true"
            @confirm="(event) => twoPickerConfirm(event)"
            @cancel="twoPickerCancel"
            :closeOnClickOverlay="true"
            @close="pickerClose"
            title="二级分类"
          ></u-picker>
          <u-picker
            :show="threePicker.show"
            :columns="threePicker.columns"
            key-name="label"
            :immediateChange="true"
            @confirm="(event) => threePickerConfirm(event)"
            @cancel="threePickerCancel"
            :closeOnClickOverlay="true"
            @close="pickerClose"
            title="三级分类"
          ></u-picker>
        </view>
        <view style="display: flex; align-items: center; column-gap: 10rpx">
          <u-button type="info" @click="clear(index)">
            <text style="font-size: 40rpx">清空</text>
          </u-button>
          <u-button type="success" @click="add">
            <text style="font-size: 40rpx">添加</text>
          </u-button>
          <u-button type="error" @click="remove(index)">
            <text style="font-size: 40rpx">删除</text>
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getQuestion } from "@/api/config";
import { getPickerValue } from "@/util/picker";

export default {
  name: "Cascader",
  props: {
    valueList: {
      type: Array,
      default: [[]],
    },
  },
  mounted() {
    getQuestion()
      .then((result) => {
        this.question = result.data;
      })
      .catch((error) => {});
  },
  methods: {
    remove(index) {
      this.$emit("remove", index);
    },
    add() {
      this.$emit("add");
    },
    clear(index) {
      this.$emit("clear", index);
    },
    pickerClose() {
      this.threePicker.show = false;
      this.twoPicker.show = false;
      this.onePicker.show = false;
    },
    onePickerCancel() {
      this.value.splice(0, 1);
      this.onePicker.show = false;
    },
    twoPickerCancel() {
      this.value.splice(1, 1);
      this.twoPicker.show = false;
    },
    threePickerCancel() {
      this.value.splice(2, 1);
      this.threePicker.show = false;
    },
    threePickerConfirm(event) {
      this.$set(this.value, 2, getPickerValue(event)[0].value);
      this.$emit("edit", { value: this.value, index: this.index });
      this.threePicker.show = false;
      this.twoPicker.show = false;
      this.onePicker.show = false;
    },
    twoPickerConfirm(event) {
      let item = getPickerValue(event)[0].value;
      this.$set(this.value, 1, item);
      let question = this.question.find((q) => {
        return q.value === this.value[0];
      });
      question = question.children.find((q) => {
        return q.value === item;
      });
      this.threePicker.columns = [question.children];
      this.threePicker.show = true;
    },
    onePickerConfirm(event) {
      let item = getPickerValue(event)[0].value;
      this.$set(this.value, 0, item);
      let question = this.question.find((q) => {
        return q.value === item;
      });
      this.twoPicker.columns = [question.children];
      this.twoPicker.show = true;
    },
    showOnePicker(value, index) {
      this.value = [...value];
      this.index = index;
      this.onePicker.columns = [this.question];
      this.onePicker.show = true;
    },
    getText(value) {
      return value.join("/");
    },
  },
  data() {
    return {
      value: [],
      index: 0,
      question: [],
      onePicker: {
        show: false,
        columns: [[]],
      },
      twoPicker: {
        show: false,
        columns: [[]],
      },
      threePicker: {
        show: false,
        columns: [[]],
      },
    };
  },
};
</script>
